<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>路由嵌套</title>
    <script src="../../vue.js"></script>
    <script src="../../vue-router.js"></script>
</head>

<body>
    <div id="app">
        <h1>我是标题</h1>
        <router-link to="/user/foo">go to home</router-link>
        <router-link to="/user/foo/profile">go to profile</router-link>
        <router-link to="/user/foo/post">go to post</router-link>
      
        <router-view></router-view>

    </div>
    <script>
        const User = {
            template: `
                <div class="user">
                    <h2>User:{{$route.params.id}}</h2>
                    <router-view></router-view>
                </div>
            `
        }
        const profile = {
            template: '<p>profile</p>'
        }
        const post = {
            template: '<p>post</p>'
        }
        const home = {
            template: '<p>home</p>'
        }
        const loac = {
            template: '<p>loac</p>'
        }
        /*

        */
        const router = new VueRouter({
            routes: [{
                path: '/user/:id',
                component: User,
                /*
                    children 配置就是像 routes 配置一样的路由配置数组，所以呢，你可以嵌套多层路由。
                */
                children: [{
                        // 当 /user/:id/profile 匹配成功，
                        // UserProfile 会被渲染在 User 的 <router-view> 中
                        path: 'profile',
                        component: profile
                    },
                    {
                        // 当 /user/:id/posts 匹配成功
                        // UserPosts 会被渲染在 User 的 <router-view> 中
                        path: 'post',
                        component: post
                    },
                    // 当 /user/:id 匹配成功，
                    // UserHome 会被渲染在 User 的 <router-view> 中
                    {
                        path: '',
                        component: home
                    }
                ]
            }]
        });
        const app = new Vue({
            router
        }).$mount('#app')
    </script>
</body>

</html>